import React from 'react';
import './style.css';
// fontawesome
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faCalculator from '@fortawesome/fontawesome-free-solid/faCalculator';
// event
import emitter from '../../util/events';
// ant
import { Form, Input, Select, Row, Col, Checkbox } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

class PaymentForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        // data事件通讯
        emitter.addListener('setFormData', () => {
            this.props.form.validateFieldsAndScroll((errors, values)=> {
                if(!errors) {
                    this.props.onChange({payment: this.props.form.getFieldsValue()})
                }else {
                    this.props.onChange(false)
                }
            })
        });
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 5 },
            },
            wrapperCol: {
                sm: { span: 18 },
            },
        };

        return (
            <div>
                <FormItem label="成本价" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('CostPrice')(<Input placeholder="请输入"/>)}
                        </Col>
                        <Col span={4}>
                            <FontAwesomeIcon icon={faCalculator} size="2x"/>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="刊登模式" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('PublishMode', {
                                initialValue: 'Price',
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select className="w100">
                                    <Option value="Price">一口价</Option>
                                    <Option value="Auction">拍卖</Option>
                                </Select>
                            )}
                        </Col>
                        <Col span={4}>
                            {
                                this.props.form.getFieldValue('PublishMode') === 'Price' && getFieldDecorator('Negotiated')(
                                    <Checkbox>议价</Checkbox>
                                )
                            }
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="刊登时限" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('PublishTime', {
                                initialValue: 'GTC',
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Input />
                            )}
                        </Col>
                    </Row>
                </FormItem>

                {
                    (this.props.form.getFieldValue('Negotiated') && this.props.form.getFieldValue('PublishMode') === 'Price') && (
                        <div>
                            <FormItem label="一口价" {...formItemLayout}>
                                <Row gutter={8}>
                                    <Col span={8}>
                                        {getFieldDecorator('Price', {
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '必填'
                                                }
                                            ]
                                        })(<Input placeholder="请输入"/>)}
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem label="自动拒绝价格" {...formItemLayout}>
                                <Row gutter={8}>
                                    <Col span={8}>
                                        {getFieldDecorator('RejectPrice', {
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '必填'
                                                }
                                            ]
                                        })(<Input placeholder="价格小于"/>)}
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem label="自动接受价格" {...formItemLayout}>
                                <Row gutter={8}>
                                    <Col span={8}>
                                        {getFieldDecorator('AcceptedPrice', {
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '必填'
                                                }
                                            ]
                                        })(<Input placeholder="价格大于"/>)}
                                    </Col>
                                </Row>
                            </FormItem>
                        </div>
                    )
                }

                {
                    this.props.form.getFieldValue('PublishMode') === 'Auction' && (
                        <div>
                            <FormItem label="起拍价" {...formItemLayout}>
                                <Row gutter={8}>
                                    <Col span={8}>
                                        {getFieldDecorator('StartingPrice', {
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '必填'
                                                }
                                            ]
                                        })(<Input placeholder="请输入"/>)}
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem label="直接购买价" {...formItemLayout}>
                                <Row gutter={8}>
                                    <Col span={8}>
                                        {getFieldDecorator('DirectPurchasePrice')(<Input placeholder="请输入"/>)}
                                    </Col>
                                    <Col span={4}>
                                        <FontAwesomeIcon icon={faCalculator} size="2x"/>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem label="流拍保护价（收费）" {...formItemLayout}>
                                <Row gutter={8}>
                                    <Col span={8}>
                                        {getFieldDecorator('ProtectPrice')(<Input placeholder="请输入"/>)}
                                    </Col>
                                </Row>
                            </FormItem>
                        </div>
                    )
                }

                <FormItem label="一口价" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('OneBitePrice')(<Input placeholder="请输入"/>)}
                        </Col>
                        <Col span={4}>
                            <FontAwesomeIcon icon={faCalculator} size="2x"/>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="数量" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('Amount', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(<Input placeholder="请输入"/>)}
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="每lot数量" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('EveryAmount')(<Input placeholder="请输入"/>)}
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="所在地模板" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('LocationTemplate', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select className="w100" placeholder="请选择">
                                    <Option value="HK">HK</Option>
                                    <Option value="US">US</Option>
                                    <Option value="CN">CN</Option>
                                </Select>
                            )}
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="PayPal账号" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('PayPalAccount', {
                                initialValue: 'HK',
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select className="w100" placeholder="请选择" disabled>
                                    <Option value="HK">HK</Option>
                                    <Option value="US">US</Option>
                                    <Option value="CN">CN</Option>
                                </Select>
                            )}
                        </Col>
                        <Col span={4}>
                            {getFieldDecorator('payment', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(<Checkbox>立即付款</Checkbox>)}
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="付款指引模板" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('PaymentGuidanceTemplate', {
                                initialValue: 'init'
                            })(
                                <Select className="w100" placeholder="请选择">
                                    <Option value="init">英文付款指引</Option>
                                </Select>
                            )}
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="付款指引" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('PaymentGuidance')(
                                <TextArea rows={4}></TextArea>
                            )}
                        </Col>
                    </Row>
                </FormItem>
            </div>
        )
    }
}

export default Form.create()(PaymentForm)